<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告</title>
    <link rel="stylesheet" href="../assets/plugin/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/plugin/photoScroll/css/photoScroll.css">
    <style type="text/css">
        .container-section {
            margin: 25px;
        }

        .notice-section {
            padding-bottom: 45px;
            border: 2px #ddd dotted;
        }

        .notice-title {
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
            padding-right: 30px;
            font-size: 28px;
            border-bottom: 3px dotted #ddd;
        }

        .notice-content {
            padding-top: 30px;
        }

        .notice-list {
            height: 40px;
            line-height: 40px;
            margin-bottom: 30px;
            padding-left: 18px;
            padding-right: 18px;
            border-top: 1px dotted #ddd;
            border-bottom: 1px dotted #ddd;
        }

        .notice-list a {
            color: #333;
            display: block;
            cursor: pointer;
            text-decoration: none;
        }

        .notice-list-title {
            float: left;
            position: relative;
        }

        .notice-list-time {
            float: right;
        }

        .lastes-news {
            position: absolute;
            top: -9px;
            right: -36px;
            color: red;
        }

        .template-notice-list {
            display: none;
        }

        .notice-pager {
            float: right;
            margin-right: 30px;
        }

        .notice-pager:after {
            content: '';
            display: block;
            clear: both;
        }

        .total-records, .pager-list-setion, .pager-number-section, .pager-jump-section {
            float: left;
        }

        .pager-list-setion {
            margin-left: 15px;
            margin-right: 15px;
        }

        .pager-number-section ul {
            margin: 0px;
            padding: 0px;
        }

        .pager-list-setion, .pager-jump-section {
            margin-top: -4px;
        }

        .pager-selection {
            height: 28px;
            width: 90px;
            border-radius: 3px;
            padding-left: 10px;
            border: 1px solid #d8dce5;
        }

        .pager-number-list {
            float: left;
            cursor: pointer;
            margin-right: 10px;
        }

        .jump-input {
            width: 60px;
            height: 28px;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            border-radius: 3px;
            border: 1px solid #d8dce5;
        }

        .pager-list-active {
            color: #409eff;
        }

        .pager-list-disabled {
            color: #b4bccc;
            cursor: not-allowed;
            pointer-events: none;
        }
    </style>
</head>
<body>
<div class="container-section">
    <div class="notice-section">
        <div class="notice-title">
            公告
        </div>
        <div class="notice-content">
            <div class="notice-list template-notice-list">
                <a>
                    <div class="notice-list-title">
                        报关一线通平台关于新增关务管理功能的公告！
                        <!--<span class="lastes-news">new!</span>-->
                    </div>
                    <div class="notice-list-time">
                        2017-11-30
                    </div>
                    <input type="hidden">
                </a>
            </div>
        </div>
        <div class="notice-pager">
            <div class="total-records">
                总共&nbsp;<span class="total-pager">12</span>&nbsp;页,当前&nbsp;<span
                    class="current-pager">1</span>&nbsp;页
            </div>
            <div class="pager-list-setion">
                <select name="pager-selection" class="pager-selection">
                    <option value="5">5条/页</option>
                    <option value="15">15条/页</option>
                    <option value="20">20条/页</option>
                </select>
            </div>
            <div class="pager-number-section">
                <ul>
                    <li class="pager-number-list pager-list-active pager-first">首页</li>
                    <li class="pager-number-list pager-list-disabled pager-prev">上一页</li>
                    <li class="pager-number-list  pager-next">下一页</li>
                    <li class="pager-number-list  pager-last">末页</li>
                </ul>
            </div>
            <div class="pager-jump-section">
                前往
                <input type="text" class="jump-input" value="1"/>
                页
            </div>
        </div>
    </div>
    <!--<div class="photoGallery"></div>-->
</div>

<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/plugin/photoScroll/js/photoScroll.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var noticePrototype = {
            _init: function () {
                this.currPager = 1;
                this.$pagerNumberList = $(".pager-number-list");
                this.$pagerFirst = $(".pager-first");
                this.$pagerPrev = $(".pager-prev");
                this.$pagerNext = $(".pager-next");
                this.$pagerLast = $(".pager-last");
                this.$pagerSelection = $(".pager-selection");
                this.$totalPager = $(".total-pager");
                this.$currentPager = $(".current-pager");
                this.$jumpInput = $(".jump-input");
                this._selectChange();
                this._getSize();
                this._pagerNumberBind();
                this._load();
                this._jumpBlur();
            },
            //加载系统公告列表
            _load: function () {
                var _this = this;
                $.ajax({
                           url: '/notice/noticeList',
                           type: 'get',
                           dataType: 'json',
                           data: {
                               "size": _this.size,
                               "pageNo": _this.currPager,
                               "number": _this.currPager
                           },
                           success: function (data) {
                               console.log(data);
                               _this.totalPages = data.totalPages;
                               /*_this.totalRecords = data.totalElements;
                                _this.currentPage = data.number;*/
                               _this.$totalPager.text(_this.totalPages);
                               _this.$currentPager.text(_this.currPager);
                               if (_this.totalPages == 1) {
                                   _this.$pagerNext.addClass("pager-list-disabled");
                                   _this.$pagerLast.addClass("pager-list-disabled");
                               }
                               _this.result = data.content;
                               var $noticeContent = $(".notice-content");
                               $noticeContent.find(".notice-list:not(.template-notice-list)")
                                       .remove();
                               if (_this.result.length) {
                                   var spanHtml = "<span class=\"lastes-news\">new!</span>";
                                   for (var i = 0; i < _this.result.length; i++) {
                                       var $clone = $(".template-notice-list").clone()
                                               .removeClass("template-notice-list");
                                       if (_this.result[i].newPublish == 0) {
                                           $clone.find(".notice-list-title")
                                                   .html(_this.result[i].title
                                                         + spanHtml);
                                       } else {
                                           $clone.find(".notice-list-title")
                                                   .text(_this.result[i].title);
                                       }
                                       $clone.find(".notice-list-time")
                                               .text(_this.result[i].createTime);
                                       $clone.find("input[type=hidden]").val(_this.result[i].id);
                                       $noticeContent.append($clone);
                                   }
                                   _this._bind();
                               }
                           },
                           error: function (XMLHttpRequest, textStatus, errorThrown) {
                               console.log(textStatus);
                           }
                       });
            },
            //每条系统公告的点击事件
            _bind: function () {
                var _this = this;
                $(".notice-list a").on("click", function () {
                    var hiddenVal = $(this).find("input[type=hidden]").val();
                    $(window.parent.document).find(".photoGallery").photoScroll({
                                                                                    needRequest: false,//不需要请求
                                                                                    dataSource: _this.result,//数据来源
                                                                                    params: hiddenVal,//公告的id
                                                                                    containers: $(
                                                                                            window.parent.document)//在某个容器下找到目标对象
                                                                                });
                });
            },
            //每页展示几条下拉框的change事件
            _selectChange: function () {
                var _this = this;
                this.$pagerSelection.on("change", function () {
                    _this._getSize();
                    _this.currPager = 1;
                    _this.$pagerFirst.addClass("pager-list-active").siblings()
                            .removeClass("pager-list-active");
                    _this.$pagerPrev.addClass("pager-list-disabled");
                    _this.$pagerNext.removeClass("pager-list-disabled");
                    _this.$pagerLast.removeClass("pager-list-disabled");
                    _this._load();
                });
            },
            //input框的跳转到第几页
            _jumpBlur: function () {
                var _this = this;
                this.$jumpInput.on("blur", function () {
                    if (parseInt($(this).val()) > _this.totalPages || parseInt($(this).val()) < 0) {
                        $(this).val("");
                    } else if (parseInt($(this).val()) > 0) {
                        if (parseInt($(this).val()) <= _this.totalPages) {
                            _this.currPager = parseInt($(this).val());
                            if (_this.currPager == _this.totalPages) {
                                _this.$pagerNext.addClass("pager-list-disabled");
                                _this.$pagerLast.addClass("pager-list-active").siblings()
                                        .removeClass("pager-list-active");
                                _this.$pagerPrev.removeClass("pager-list-disabled");
                                _this.$pagerFirst.removeClass("pager-list-disabled");
                                _this._load();
                            } else if (_this.currPager == 1) {
                                _this.$pagerPrev.addClass("pager-list-disabled");
                                _this.$pagerFirst.addClass("pager-list-active").siblings()
                                        .removeClass("pager-list-active");
                                _this.$pagerNext.removeClass("pager-list-disabled");
                                _this.$pagerLast.removeClass("pager-list-disabled");
                                _this._load();
                            } else if (_this.currPager < _this.totalPages && _this.currPager > 1) {
                                _this.$pagerNumberList.removeClass("pager-list-disabled");
                                _this.$pagerNext.addClass("pager-list-active").siblings()
                                        .removeClass("pager-list-active");
                                _this._load();
                            }
                        }
                    }
                });
            },
            //获得每页展示多少条
            _getSize: function () {
                this.size = this.$pagerSelection.find("option:selected").val();
            },
            //首页，上一页，下一页，末页的绑定事件
            _pagerNumberBind: function () {
                var _this = this;
                $(".pager-number-list").on("click", function () {
                    if ($(this).hasClass("pager-first")) {
                        if (!$(this).hasClass("pager-list-active")) {
                            _this.currPager = 1;
                            _this.$jumpInput.val(_this.currPager);
                            $(this).addClass("pager-list-active").siblings()
                                    .removeClass("pager-list-active");
                            _this.$pagerPrev.addClass("pager-list-disabled");
                            _this.$pagerNext.removeClass("pager-list-disabled");
                            _this.$pagerLast.removeClass("pager-list-disabled");
                            _this._load();
                        } else {
                            return false;
                        }
                    } else if ($(this).hasClass("pager-prev")) {
                        _this.currPager--;
                        _this.$jumpInput.val(_this.currPager);
                        if (_this.currPager == 1) {
                            $(this).addClass("pager-list-disabled");
                            _this.$pagerFirst.addClass("pager-list-active").siblings()
                                    .removeClass("pager-list-active");
                            _this.$pagerNext.removeClass("pager-list-disabled");
                            _this.$pagerLast.removeClass("pager-list-disabled");
                        } else {
                            $(this).addClass("pager-list-active").siblings()
                                    .removeClass("pager-list-active");
                            _this.$pagerNext.removeClass("pager-list-disabled");
                            _this.$pagerLast.removeClass("pager-list-disabled");
                        }
                        _this._load();
                    } else if ($(this).hasClass("pager-next")) {
                        _this.currPager++;
                        _this.$jumpInput.val(_this.currPager);
                        if (_this.currPager == _this.totalPages) {
                            $(this).addClass("pager-list-disabled");
                            _this.$pagerLast.addClass("pager-list-active").siblings()
                                    .removeClass("pager-list-active");
                            _this.$pagerPrev.removeClass("pager-list-disabled");
                            _this.$pagerFirst.removeClass("pager-list-disabled");
                        } else {
                            $(this).addClass("pager-list-active").siblings()
                                    .removeClass("pager-list-active");
                            _this.$pagerFirst.removeClass("pager-list-disabled");
                            _this.$pagerPrev.removeClass("pager-list-disabled");
                        }
                        _this._load();
                    } else if ($(this).hasClass("pager-last")) {
                        if (!$(this).hasClass("pager-list-active")) {
                            _this.currPager = _this.totalPages;
                            _this.$jumpInput.val(_this.currPager);
                            $(this).addClass("pager-list-active").siblings()
                                    .removeClass("pager-list-active");
                            _this.$pagerNext.addClass("pager-list-disabled");
                            _this.$pagerPrev.removeClass("pager-list-disabled");
                            _this.$pagerFirst.removeClass("pager-list-disabled");
                            _this._load();
                        } else {
                            return false;
                        }
                    }
                });
            }
        };
        noticePrototype._init();
    });
</script>
</body>
</html>